<template>
<div class="html">
<!--头部黑色区域-->
  <div class="header">
    <!--头部的第一行区域-->
    <div class="header-top">
      <!--左边的文字-->
      <span class="header-top-left linkBLock floatLeft borderBox">
        <span class="linkBLock">FAQ</span>
        <span class="linkBLock">Rules</span>
        <span class="linkBLock">Handbook</span>
      </span>
      <!--中间的标题-->
      <span class="header-top-center linkBLock floatLeft">KICKSTZRTER</span>
      <!--右边的小圆圈-->
      <span class="header-top-right linkBLock floatLeft">
        <span class="linkBLock"></span>
      </span>
      <!--清除浮动-->
      <div class="clear"></div>
    </div>
    <!--头部黑色区域正中间的大标题-->
    <span class="title block">Art Project by Sun He</span>
    <!--两个交叉的圆圈-->
    <span class="circle block">
      <span class="circle-left linkBLock"></span>
      <span class="circle-right linkBLock"></span>
    </span>
  </div><!--头部结束-->
  <!--主体部分-->
  <div class="center borderBox">
    <!--灰色内容的盒子-->
    <div class="box">
      <!--右上角的小文字-->
      <span class="box-rightTop block">Preview</span>
      <!--正中间的主要内容-->
      <div class="box-main">
        <!--盒子中间的左边内容-->
        <div class="box-mainLeft floatLeft">
          <span class="box-mainTitle block">Campaign</span>
          <!--每个小区块-->
          <span v-for="(item,key) in boxListOne" :key="key" class="box-mainSpan block">
            <el-progress type="circle" :percentage="75" id="progress" class="progress floatLeft" :width=34 :stroke-width=1 color="#317162" status="success"></el-progress>
            <span class="name block">{{item.name}}</span>
            <span class="text block">{{item.text}}</span>
            <div class="clear block"></div>
          </span>
          <span class="box-mainTitle block">Account</span>
          <!--每个小区块-->
          <span class="box-mainSpan block">
            <el-progress type="circle" :percentage="75" class="progress floatLeft" :width=34 :stroke-width=1 color="#317162" status="success"></el-progress>
            <span class="name block">Profile</span>
            <span class="text block">Write a bio and add links to your social accounts.</span>
            <div class="clear block"></div>
          </span>
          <span class="box-mainSpan block">
            <el-progress type="circle" :percentage="75" class="progress floatLeft" :width=34 :stroke-width=1 color="#317162" status="success"></el-progress>
            <span class="name block">Account</span>
            <span class="text block">Confirm your identity and link a bank account.</span>
            <span class="time block">3 days to verify</span>
            <div class="clear"></div>
          </span>
        </div>
        <!--盒子右边的小方块的内容-->
        <div class="box-mainRight floatLeft">
          <span class="block">Start strong</span>
          <span class="block">Prepare an outreach strategy from the get-go.</span>
          <span class="block">Go</span>
          <span class="block">1 of 3</span>
        </div>

        <div class="clear"></div>
      </div>
      <!--灰色盒子的底部-->
      <div class="box-bottom borderBox">
        <span>0 of 5 complete</span>
        <span>After you’re completed all steps,you can submit for review.</span>
      </div>
    </div>
  </div>
  <!--脚部-->
  <div class="footer">
    <span>Delete project</span>
  </div>
</div>
</template>

<script>
    export default {
        name: "project-summarize-klckstarter",
        data(){
            return{
              boxListOne:[
                {name:'Basics',text:'Add an image,set your funding goal,and more.'},
                {name:'Rewards',text:'Set your rewards and shipping costs.'},
                {name:'Story', text:'Add a video and detailed project description.'}
              ],
            };
        },
    }
</script>

<style scoped lang="scss">
  .box-mainSpan #progress{
    color: black;
  }
  /*公共样式*/
  .clear{clear: both;}
  .block{display: block}
  .linkBLock{display: inline-block}
  .floatLeft{float: left}
  .borderBox{box-sizing: border-box}
  /*头部*/
  .header{
    height:318px;
    background: #212121;
    overflow: hidden;
    /*头部第一行文字*/
    .header-top{
      /*头部左边的文字*/
      .header-top-left{
        font-family: PingFangSC-Regular;
        width: 25%;
        padding:35px 0 0 85px;
        font-size:12px;
        color:#FFFFFF;
      }
      /*中间的标题*/
      .header-top-center{
        width: 50%;
        text-align: center;
        margin-top: 22px;
        font-family: Phosphate-Solid;
        font-size: 18px;
        color: #FFFFFF;
        letter-spacing: 0.5px;
      }
      /*右边的小圆圈*/
      .header-top-right{
        width:25%;
        text-align: right;
        span{
          width:30px;
          height:30px;
          border-radius: 50%;
          border: 1px solid #FFFFFF;
          margin: 27px 87px 0 0 ;
        }
      }
    }
    /*头部正中间的大标题*/
    .title{
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: #FFFFFF;
      letter-spacing: 0.5px;
      margin-top: 71px;
    }
    /*两个交叉的圆圈*/
    .circle{
      text-align: center;
      margin-top: 21px;
      span{
        width:44px;
        height: 44px;
        border-radius: 50%;
        border: 1px dashed #ffffff;
      }
      .circle-left{
        transform: translateX(8px);
      }
      .circle-right{
        transform: translateX(-8px);
      }
    }
  }
  /*主体部分*/
  .center{
    /*灰色内容的盒子*/
    .box{
      width: 1068px;
      margin: 0 auto;
      height: 739px;
      margin-top: -62px;
      background: #FBFBFA;
      box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
      z-index: 999;
      /*右上角的小文字*/
      .box-rightTop{
        width: 1068px;
        line-height: 62px;
        ont-family: PingFangSC-Regular;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.25px;
        text-align: right;
        padding-right: 50px;
        box-sizing: border-box;
        background: #FBFBFA;
        box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
      }
      /*正中间的主要内容*/
      .box-main{
        width: 1068px;
        height:581px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
        padding:10px 46px 0 33px;
        box-sizing: border-box;
        .box-mainTitle{
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0.25px;
          margin: 10px 0 2px 0;
        }
        /*盒子左边的内容*/
        .box-mainLeft{
          padding-right: 29px;
          font-size: 12px;
          letter-spacing: 0;
          /*每个人小区块*/
          .box-mainSpan{
            width:675px;
            height:82px;
            background: #FFFFFF;
            box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15), -2px -2px 4px 0 rgba(0,0,0,0.15);
            margin-top: 8px;
            padding:16px 0 0 0px;
            box-sizing: border-box;
            span{
              font-family: PingFangSC-Regular;
            }
            span:nth-child(3){
              color: #666666;
              margin-left:6px;
            }
          }
          .progress{
            margin:8px 16px 0 20px;
            vertical-align: middle;
          }
          .name{
            margin-bottom:6px;
            font-size: 14px;
            color: #2E2E2E;
            letter-spacing: 0.29px;
          }
          .text{
            color: #999999;
          }
          .time{
            margin-left: 87px;
            font-family: Times-Roman;
            color: #666666;
          }
        }
        /*盒子右边小方块的内容*/
        .box-mainRight{
          width: 272px;
          height: 230px;
          border: 1px solid #505050;
          box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.20), -1px -1px 1px 0 rgba(0,0,0,0.20);
          margin-top: 51px;
          text-align: center;
          position: relative;
        }
        .box-mainRight span{
          font-family: Times-Roman;
          font-size: 16px;
          color: #2F2F2F;
          letter-spacing: 0;
          margin: 0 auto;
        }
        .box-mainRight span:nth-child(1){
          margin: 50px 0 10px 0;
        }
        .box-mainRight span:nth-child(2){
          width: 186px;
          margin-bottom: 20px;
        }
        .box-mainRight span:nth-child(3){
          width: 38px;
          line-height: 38px;
          background-color:#000000;
          color: #ffffff;
        }
        .box-mainRight span:nth-child(4){
          font-size: 12px;
          color: #000000;
          position: absolute;
          bottom:-27px;
          width: 272px;
          text-align: center;
        }
      }
    }
  }
  /*灰色盒子的底部*/
  .box-bottom{
    width: 1068px;
    height: 96px;
    background: #FBFBFA;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.15);
    text-align: center;
    padding-top: 27px;
    span{
      display: block;
      font-family: Times-Roman;
      font-size: 12px;
      color: #888888;
      letter-spacing: 0.5px;
    }
    span:nth-child(1){
      margin-bottom:10px;
      color: #2E2E2E;
    }
  }
  /*脚部*/
  .footer{
    width: 1068px;
    margin: 0 auto;
    padding: 13px 0 84px 18px;
    font-family: Times-Roman;
    font-size: 12px;
    color: #2E2E2E;
    letter-spacing: 0;
  }

</style>

